<template>
  <div class="register-wrapper">
    <div class="topheader">
      <topheader>
        <template v-slot:nameCN>模型注册模型注册模型注册模型注册</template>
        <template v-slot:nameEN>Model integration management</template>
      </topheader>
    </div>
    <div class="register">
      <div class="form">
        <div class="form-top">
          <div class="form-top-left">
            <div class="title">模型图标：</div>
            <div
              v-if="!headPhoto"
              class="photo-default"
              @click="uploadImage"
            ></div>
            <div
              v-else
              class="headPhoto"
              @click="uploadImage"
              :style="{ backgroundImage: `url(${headPhoto})` }"
            ></div>
          </div>
          <div class="form-top-right">
            <div class="title">适用业务：</div>
            <div class="tagslist">
              <input
                placeholder="请添加标签"
                v-for="item in tagArr"
                v-model="item.name"
                :key="item.id"
                class="taginput"
              />
            </div>
            <div class="addtagbtn" @click="addTagArrFn"></div>
          </div>
        </div>
        <div class="form-name">
          <div class="title">模型名称：</div>
          <input
            type="text"
            placeholder="请输入模型名称"
            class="nameInput"
            v-model="nameVal"
          />
        </div>
        <div class="form-type" v-if="typeOptions">
          <div class="title">模型类别：</div>
          <el-cascader
            v-model="typeVal"
            :options="typeOptions"
            :props="typeProps"
          ></el-cascader>
        </div>
        <div class="form-URL">
          <div class="title">URL地址：</div>
          <input
            type="text"
            placeholder="请输入网址"
            class="urlInput"
            v-model="URLVal"
          />
        </div>
        <div class="form-desc">
          <div class="title">模型介绍：</div>
          <el-input
            type="textarea"
            rows="6"
            :resize="'none'"
            placeholder="请输入模型介绍"
            v-model="descVal"
          >
          </el-input>
        </div>
        <div class="form-file">
          <div class="title">研究报告：</div>
          <div class="fileBtn">上传</div>
        </div>
      </div>
      <div class="from-submit" @click="formsubmitFn">提交</div>
    </div>
  </div>
</template>

<script>
import topheader from '@/components/tophearder'
export default {
  components: {
    topheader,
  },
  data() {
    return {
      loading: null,
      headPhoto: '',
      nameVal: '',
      tagArr: [{ name: '', id: 1 }],
      tagEndArr: [],
      typeVal: '',
      typeOptions: '',
      typeProps: {
        label: 'name',
        value: 'id',
        children: 'list',
        expandTrigger: 'hover',
      },
      URLVal: '',
      descVal: '',
    }
  },
  mounted() {
    this.initTypeArr()
  },
  methods: {
    uploadImage() {
      let fileInput = document.createElement('input')
      fileInput.type = 'file'
      document.body.appendChild(fileInput)
      fileInput.setAttribute('accept', 'image/*')
      fileInput.id = 'fileInput'
      fileInput.style.cssText = 'display:none;'
      fileInput.click()
      fileInput.addEventListener('change', (e) => {
        let element = e.target.files[0]
        const sizeLimit = element.size / 1024 / 1024 / 1024 < 1
        if (!sizeLimit) {
          this.$message({
            message: '上传文件大小不能超过 1GB!',
            type: 'warning',
          })
          return
        }
        if (window.FileReader) {
          var reader = new FileReader()
          reader.readAsDataURL(element)
          //监听文件读取结束后事件
          reader.onloadend = (e) => {
            this.headPhoto = e.target.result
            console.log(222, this.headPhoto)
          }
        }
        // this.loading = this.$loading({
        //   lock: true,
        //   text: "努力上传中...",
        //   spinner: "el-icon-loading",
        //   background: "rgba(0, 0, 0, 0.7)",
        // });
        // let formData = new FormData();
        // this.$api
        //   .batchUpload(formData)
        //   .then(() => {
        //     this.loading.close();
        //   })
        //   .catch((err) => {
        //     console.log(999, err);
        //     this.loading.close();
        //     this.$confirm("", "上传失败！", {
        //       confirmButtonText: "确定",
        //       showClose: false,
        //       closeOnClickModal: false,
        //       closeOnPressEscape: false,
        //       cancelButtonText: "",
        //       center: true,
        //       showCancelButton: false,
        //     })
        //       .then(() => {
        //         // this.$router.go(-1);
        //       })
        //       .catch(() => {});
        //   });
        fileInput.remove()
      })
    },
    formsubmitFn() {
      let msg = ''
      if (!this.headPhoto) {
        msg = '模型图标不能为空!'
        this.showTipsFn(msg)
        return
      }
      this.nameVal = this.nameVal.trim()
      if (!this.nameVal) {
        msg = '模型名称不能为空!'
        this.showTipsFn(msg)
        return
      }
      this.submitTagFn()
      if (!this.typeVal) {
        msg = '模型类别不能为空!'
        this.showTipsFn(msg)
        return
      }
      this.URLVal = this.URLVal.trim()
      if (!this.URLVal) {
        msg = 'URL地址不能为空!'
        this.showTipsFn(msg)
        return
      }
      this.descVal = this.descVal.trim()
      if (!this.descVal) {
        msg = '模型介绍不能为空!'
        this.showTipsFn(msg)
        return
      }
      this.createIDFn()
      let obj = {
        id: this.createIDFn(),
        name: this.nameVal,
        imgUrl: this.headPhoto,
        link: this.URLVal,
        desc: this.descVal,
        info: this.tagArr,
        tree: [],
        treeDesc: '11111111564asdasda啊实打实',
        hot: 0,
        download: 0,
        rank: 0,
      }
      this.$store.commit('addItemInListFn', obj)
      this.$message({
        showClose: false,
        message: '创建成功~',
        type: 'success',
        customClass: 'messageTips',
      })
      this.$router.push({ name: 'management' })
    },
    // 添加新的tag-input标签项
    addTagArrFn() {
      let flag = this.tagArr.some((item) => {
        return item.name.trim() === ''
      })
      if (flag) {
        this.showTipsFn('有空置标签未填写,不能增加新的标签项!')
        return
      }
      if (this.tagArr.length === 7) {
        this.showTipsFn('单个模型最多可以添加7个标签！')
        return
      }
      let len = this.tagArr + 1
      this.tagArr.push({ name: '', id: len })
    },
    // 提交时tag的判断
    submitTagFn() {
      let len = this.tagArr.length
      if (len === 1) {
        let flag = this.tagArr.some((item) => {
          return item.name.trim() === ''
        })
        if (flag) {
          this.showTipsFn('有空置标签未填写,不能提交!')
          return
        }
      }
    },
    // 创建一个新的符合id
    createIDFn() {
      let idArr = this.typeVal[this.typeVal.length - 1].split('-')
      if (idArr.length > 1) {
        let index1 = Number(idArr[0])
        let index2 = Number(idArr[1])
        let len = this.$store.state.dataList[index1].list[index2].sonlist.length
        return index1 + '-' + index2 + '-' + len
      } else {
        let index = Number(idArr[0])
        let len = this.$store.state.dataList[index].list.length
        return index + '-' + len
      }
    },
    // 初始化类型数据
    initTypeArr() {
      let dataList = JSON.parse(JSON.stringify(this.$store.state.dataList))
      let typeList = []
      dataList.forEach((item, index) => {
        if (index <= 1) {
          delete item.list
          typeList.push(item)
        } else {
          typeList.push(item)
        }
      })
      this.typeOptions = typeList
    },
    // 消息tips
    showTipsFn(msg) {
      this.$message({
        showClose: false,
        message: msg,
        type: 'error',
        customClass: 'messageTips',
      })
      return
    },
  },
}
</script>

<style lang="scss" scoped>
.register-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .topheader {
    width: 100%;
    height: 60px;
    flex: 0 0 60px;
  }
  .register {
    width: 100%;
    height: 100%;
    flex: 1 1 auto;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(315deg, #04334b 0%, #031c2b 100%);
    padding: 40px 40px 60px;
    .form {
      width: 100%;
      .title {
        font-size: 16px;
        flex: 0 0 auto;
        line-height: 30px;
        color: #2cfcfe;
        font-weight: 600;
        margin-right: 12px;
      }
      .form-top {
        display: flex;
        width: 100%;
        height: 120px;
        display: flex;
        align-items: flex-start;
        margin-bottom: 30px;
        .form-top-left {
          display: flex;
          .title {
            padding-top: 8px;
          }
          .photo-default {
            width: 120px;
            height: 120px;
            box-sizing: border-box;
            border: 2px solid #3793c9;
            border-radius: 2px;
            background: url('../../assets/images/default-img.png') center center
              no-repeat;
            background-size: 68px 63px;
          }
          .headPhoto {
            width: 120px;
            height: 120px;
            box-sizing: border-box;
            border: 2px solid #3793c9;
            border-radius: 2px;
            background-position: center;
            background-size: cover;
            background-repeat: no-repeat;
          }
        }
        .form-top-right {
          display: flex;
          align-items: center;
          margin-left: 40px;
          .tagslist {
            display: flex;
            align-items: center;
            width: auto;
            height: 40px;
            .taginput {
              width: 180px;
              height: 40px;
              padding: 0 12px;
              color: #fff;
              box-sizing: border-box;
              border-radius: 2px;
              border: 1px solid #3793c9;
              margin-right: 10px;
            }
          }
          .addtagbtn {
            width: 40px;
            height: 40px;
            border-radius: 2px;
            cursor: pointer;
            background-color: #1ba4fc;
            position: relative;
            &::after {
              content: '';
              position: absolute;
              width: 20px;
              height: 2px;
              background-color: #fff;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
            }
            &::before {
              content: '';
              position: absolute;
              width: 2px;
              height: 20px;
              background-color: #fff;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
            }
          }
        }
      }
      .form-type {
        display: flex;
        align-items: center;
        /deep/.el-cascader {
          flex: 1 1 auto;
          .el-input__inner {
            border-color: #3793c9;
            background-color: transparent;
            color: #fff;
          }
          .el-input__suffix {
            color: #3793c9;
          }
        }
      }
      .form-URL,
      .form-name {
        display: flex;
        align-items: center;
        margin: 30px 0;
        .urlInput,
        .nameInput {
          flex: 1 1 auto;
          width: 100%;
          height: 40px;
          border-radius: 2px;
          border: 1px solid #3793c9;
          box-sizing: border-box;
          padding: 0 15px;
          font-size: 14px;
          color: #fff;
        }
      }
      .form-desc {
        display: flex;
        align-items: center;
        .title {
          align-self: flex-start;
          padding-top: 10px;
        }
        /deep/.el-textarea {
          flex: 1 1 auto;
          .el-textarea__inner {
            background-color: transparent;
            border-color: #3793c9;
            padding: 14px;
            color: #fff;
          }
        }
      }
      .form-file {
        display: flex;
        margin-top: 30px;
        align-items: center;
        cursor: pointer;
        .fileBtn {
          width: 80px;
          height: 30px;
          text-align: center;
          color: #fff;
          background-color: #1a9efc;
          border-radius: 2px;
          font-size: 14px;
          line-height: 30px;
        }
      }
    }
    .from-submit {
      width: 300px;
      height: 40px;
      font-size: 16px;
      line-height: 40px;
      text-align: center;
      color: #fff;
      border-radius: 2px;
      background-color: #1ba4fc;
    }
  }
}
</style>
